<template> 
  <div class="demo-split">
    <button class="bu" @click="exportData"></button>
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" >
        
        <Table :columns="columns1" :data="data1" border height="425" ref="table"></Table>
      </div>
      <div slot="bottom" class="demo-split-pane">
        <Row justify="space-between">
          <Col span="8">
            <chartpie dyid="radia" :datas="option" />
          </Col>
          <Col span="16">
            <yearbar :datas="year" />
          </Col>
        </Row>
      </div>
    </Split>
  </div>

</template>
<script>
import chartpie from "./reportchart/salechartpie.vue";
import yearbar from "./reportchart/saleyearpie.vue";

export default {
  data() {
    return {
      split2: 0.5,
      columns1: [
        {
          title: "年度农作物销售情况报表",
          align: "center",
          children: [
            {
              title: "农作物",
              key: "cname",
              align: "center",
              width: 200,
            },

            {
              title: "季度销售",
              align: "center",
              children: [
                {
                  title: "第一季度",
                  align: "center",
                  width: 250,
                  children: [
                    {
                      title: "销量",
                      key: "qs1",
                      align: "center",
                      width: 125,
                    },
                    {
                      title: "销售额",
                      key: "qsv1",
                      align: "center",
                      width: 125,
                    },
                  ],
                },
                {
                  title: "第二季度",

                  align: "center",
                  width: 250,
                  children: [
                    {
                      title: "销量",
                      key: "qs2",
                      align: "center",
                      width: 125,
                    },
                    {
                      title: "销售额",
                      key: "qsv2",
                      align: "center",
                      width: 125,
                    },
                  ],
                },
                {
                  title: "第三季度",

                  align: "center",
                  width: 250,
                  children: [
                    {
                      title: "销量",
                      key: "qs3",
                      align: "center",
                      width: 125,
                    },
                    {
                      title: "销售额",
                      key: "qsv3",
                      align: "center",
                      width: 125,
                    },
                  ],
                },
                {
                  title: "第四季度",

                  align: "center",
                  width: 250,
                  children: [
                    {
                      title: "销量",
                      key: "qs4",
                      align: "center",
                      width: 125,
                    },
                    {
                      title: "销售额",
                      key: "qsv4",
                      align: "center",
                      width: 125,
                    },
                  ],
                },
              ],
            },

            {
              title: "年度分析",
              align: "center",
              children: [
                {
                  title: "销量",
                  key: "ys",
                  align: "center",
                  width: 220,
                },
                {
                  title: "销售额",
                  key: "ysv",
                  align: "center",
                  width: 220,
                },
              ],
            },
            {
              title: "评价",
              key: "pj",
              align: "center",
              width: 195,
            },
          ],
        },
      ],
      data1: [],
      charts_qs: [],
      charts_qsv: [],
      option: {},
      year: [],
    };
  },
  mounted() {
    this.axios
      .get("/api/report")
      .then((r) => {
        this.data1 = r.data.table;
        this.charts_qs = r.data.charts_qs;
        this.charts_qsv = r.data.charts_qsv;
        this.year = r.data.year;
        this.columns1[0].title = r.data.title;
      })
      .catch((E) => {
        this.$Message.error("e" + E);
      })
      .finally(() => {
        this.option = {
          dataset: {
            source: this.charts_qs,
          },
          title: { text: "四季度作物情况" },
          angleAxis: {
            type: "category",
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          radiusAxis: {},
          polar: {},
          series: [],
          legend: {
            show: true,
          },
        };
        for (var it = 0; it < 4; it++) {
          console.log(it);
          var item = {
            type: "bar",
            seriesLayoutBy: "row",
            coordinateSystem: "polar",

            stack: "a",
            emphasis: {
              focus: "series",
            },
          };
          this.option.series.push(item);
        }
      });
  },
  components: {
    chartpie,
    yearbar,
  },
  methods:{
    exportData(){
      this.$refs.table.exportCsv(
        {
          filename:"baobiao"
        }
      )
    }
  }
};
</script>
<style scoped>
button {
  margin-top: 11px;
  width: 100px;
  height: 38px;
  cursor: pointer;
  /* background-color: red; */
  background: none;
  border: none;
}
.bu {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: #C9D6FF;
  background-image: linear-gradient(315deg, #C9D6FF 0%, #E2E2E2 74%);
  position: absolute;
  margin-left: 1672px;
  z-index: 999;
}
button:before,
button:after {
  content: "打印";
  letter-spacing: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  position: absolute;
  /* z-index: -1; */
  width: 100px;
  height: 38px;
  transition: 500ms;
}

button:before {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

button:after {
  width: 0px;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) translateX(100px);
  color: rgba(255, 255, 255, 0.5);
}

button:hover:before {
  width: 0px;
  transform: translateY(-50%) translateX(100px);
}

button:hover:after {
  width: 100px;
  transform: translateY(-50%) translateX(0px);
}

button:focus {
  outline: none;
}
</style>
